<template>
    <div class="awaitgetdou">
        <scroller
                :on-refresh="refresh"
                :on-infinite="infinite"
        >
            <span class="tip">推荐设置为不中奖返还的订单，需等订单完成时结算</span>
            <ul class="listcon">
                <li v-for="(item,index) in lists" :key="index" @click="jumpfn(item.planId)">
                    <div class="leftinfo">
                        <strong>{{item.type.name}}</strong>
                        <b>{{item.create}}</b>
                    </div>
                    <div class="rightinfo">
                        <em>{{item.value}}</em>
                    </div>
                    <icon name="right" scale="1.5"/>
                </li>
            </ul>
        </scroller>
    </div>
</template>

<script>
    import {getAwaitdouR} from '../../service/my';
    import {getMytoken} from '../../service/common';
    import {delay} from '../../uitls/common';
    import {concat} from 'ramda';
    export default {
        components: {},
        data() {
            return {
                lists: [],
                page: 1
            };
        },
        created() {
            this.getDate(1);
        },
        computed: {},
        methods: {
            async refresh(done){
                await delay(1000);
                await this.getDate(1);
                done();
            },
            async infinite(done){
                await delay(1000);
                this.page = this.page + 1;
                const over = await this.getDate(this.page, true);
                if(over) {
                    done(true);
                    this.page = this.page - 1;
                    return;
                }
                done();
            },
            async getDate(page, loadmore){
                const {token}=await getMytoken();
                if(!token) {
                    this.$vux.toast.text('未登录');
                    return;
                }
                const {data}= await getAwaitdouR(token, page);
                if(data && data.code === 0) {
                    if(loadmore) {
                        this.lists = concat(this.lists, data.data.values);
                        return true;
                    }
                    else {
                        this.page = 1;
                        this.lists = data.data.values;
                    }
                }
                else {
                    this.$vux.toast.text(data.msg);
                }
            },
            jumpfn(id){
                this.$router.push(`/matchs/recommendmatchdetails/${id}`);
            }
        }
    }
</script>
<style scoped lang="less" rel="stylesheet/less">
    @import "../app";

    .awaitgetdou {
        height: 100%;
    }

    .tip {
        height: 68px;
        line-height: 68px;
        font-size: @fz26;
        color: @color2;
        padding-left: 34px;
    }

    .listcon {
        background: #fff;
        li {
            display: flex;
            align-items: center;
            padding: 0 24px 0 34px;
            box-sizing: border-box;
            height: 120px;
            border-bottom: 1px solid @color12;
            div {
                display: flex;
                flex-direction: column;
            }
            .leftinfo {
                flex: 1;
                strong {
                    font-size: @fz32;
                    color: @color1;
                }
                b {
                    color: @color3;
                    font-size: @fz24;
                }
            }
            .rightinfo {
                text-align: right;
                margin-right: 20px;
                em {
                    font-size: @fz32;
                    color: @color22;
                    font-weight: bolder;
                }
                b {
                    color: @color3;
                    font-size: @fz24;
                }
            }
            svg {
                color: @color4;
            }
        }
    }

</style>